<template>
  <div class="teacher">
    <!-- 顶部navbar -->
    <div class="nav">
      <p><</p>
      <p>讲师详情</p>
      <p></p>
    </div>
    <!-- 讲师详情关注不关注 -->
    <div class="cart_item" v-if="teacherList.teacher">
      <div>
        <img :src="teacherList.teacher.avatar" alt="" />
        <p>女 年教龄</p>
      </div>
      <button @click="guanzhule" v-if="teacherList.flag == 1">关注</button>
      <button @click="guanzhule" v-if="teacherList.flag == 2">取消关注</button>
    </div>
    <!-- tab栏切换 -->
    <div class="tab">
      <div class="header">
        <p @click="active = 0" :class="{ active: active == 0 }">讲师课程</p>
        <p @click="active = 1" :class="{ active: active == 1 }">主讲课程</p>
        <p @click="active = 2" :class="{ active: active == 2 }">学员评价</p>
      </div>
      <div>
        <div v-if="active == 0">1111111111111</div>
        <div v-if="active == 1">2222222222222</div>
        <div v-if="active == 2">3333333333333</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTeacher, guanzhu } from "@/tool/teacher";
export default {
  data() {
    return {
      teacherId: 0,
      teacherList: {},
      active: 0,
    };
  },
  methods: {
    async getDetail() {
      let res = await getTeacher(this.$route.query.id);
      console.log(res);
      this.teacherList = res.data;
    },
    async guanzhule() {
      let res = await guanzhu(this.teacherId);
      console.log(res);
      this.getDetail();
    },
  },
  mounted() {
    this.getDetail();

    this.teacherId = this.$route.query.id;
    // query方式接收
    // console.log(this.$route.query.id);
    // params方式接收
    // console.log(this.$route.params);
  },
};
</script>
<style lang="scss" scoped>
.teacher {
  .nav {
    padding: 10px 0px 0 20px;
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    width: 100%;
    background-color: #5ba2f4;
    height: 100px;
    display: flex;
    justify-content: space-between;
  }
  .cart_item {
    width: 90vw;
    height: 126px;
    position: absolute;
    top: 63px;
    left: 5vw;
    background-color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 240px 0 20px;
    box-sizing: border-box;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    button {
      width: 90px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      background-color: #ebeefe;
      border-radius: 30px;
      color: red;
      border: none;
    }
  }
  .tab {
    margin-top: 120px;
    .header {
      height: 63px;
      line-height: 63px;
      background-color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      p {
        height: 63px;
      }
    }
  }
  .active {
    color: orange;
    border-bottom: 3px solid orange;
  }
}
</style>